<script setup>
import MwTableHospital from "./../archiveData/component/MwTableHospital";
import MwTableVehicle from "./../archiveData/component/MwTableVehicle";
import MwTableCamera from "./../archiveData/component/MwTableCamera";
import MwTableDriver from "./../archiveData/component/MwTableDriver";
import MwTableAlarm from "./../archiveData/component/MwTableAlarm";
import { notifyOpen } from "@/utils/publicFun";
import FlvVideo from "@/components/flvVideo";
import TotalAlarm from "./component/TotalAlarm.vue";

import alarm_1 from "@/assets/image/index/ico_1.png";				// 轮椅
import alarm_2 from "@/assets/image/index/ico_2.png";				// 抽烟
import alarm_3 from "@/assets/image/index/ico_3.png";				// 打电话
import alarm_4 from "@/assets/image/index/ico_4.png";				// 遮挡

// tree 的icon
import carIcon from "@/assets/image/index/ico_jiankong.png";
import hospitalIcon from "@/assets/image/index/ico_yiyuan.png";
import cityIcon from "@/assets/image/index/ico_sheng.png";

import OfflineMap from "@/components/offlineMap";
import RigidPic from "@/components/rigidPic";
import AlarmDialog from "@/components/AlarmDialog";
import moment from "moment";
import { Search, ArrowUpBold, ArrowDownBold, MoreFilled, Delete, EditPen } from '@element-plus/icons-vue';
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';

import { Overlay, Feature } from "ol";
import * as olProj from "ol/proj";
import { Polygon, Point, LineString } from "ol/geom";
import { boundingExtent } from "ol/extent";
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick, h, markRaw, toRaw, onBeforeUnmount } from "vue";
import { capitalizeFirstLetter } from "@/utils";
import { globalStore } from "@/store/global";
const globalVue = globalStore();

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this
const storage = _this.$utils.storage;

const timer = ref(null);


// 生命周期
onMounted(() => {
	setTimeout(() => {
		contentShow.value = true;
	}, 300);
	setTimeout(() => {
		contentShow.value = false;
	}, 1500);
	timer.value = setInterval(() => {
		nextTick(() => {
			uploadPoint();
		})
	}, window.global_API.homePageCarUploadTime);
	init();
});

onBeforeUnmount(() => {
	if (timer.value) {
		clearInterval(timer.value);
	};
});

// 更新地图点位信息
function uploadPoint() {
	let paramsDash = {
		startTime: moment().format("YYYY-MM-DD") + ' 00:00:00',
		endTime: moment().format("YYYY-MM-DD") + ' 23:59:59',
	};
	instance.proxy.$http.get('overview.getDashBoardAmbulanceList', { params: paramsDash }).then(res => {
		let arr = [];
		mapComRef.value.markerLayer['on_Ambulance']?.get('source').getFeatures().map(i => {
			i.get('features').forEach(x => {
				arr.push(x);
			});
		});
		mapComRef.value.markerLayer['alarm_Ambulance']?.get('source').getFeatures().map(i => {
			i.get('features').forEach(x => {
				arr.push(x);
			});
		});
		mapComRef.value.markerLayer['off_Ambulance']?.getSource().getFeatures().map(i => {
			i.get('features').forEach(x => {
				arr.push(x);
			});
		});
		res.data.forEach(j => {
			let obj = arr.find(i => i.get('id') == j.id);
			if (obj?.get('center') != [j.lng, j.lat].toString()) {
				obj?.setGeometry(new Point(olProj.fromLonLat([j.lng, j.lat])));
				obj?.set('center', [j.lng, j.lat].toString());
			};
		});
	})
}

// select
const classificationSelect = ref([])
const citySelect = ref([])

const init = async () => {
	// 获取字典数据
	stateList.value = await globalVue.getAlarmSelect();
	classificationSelect.value = await globalVue.getSelect('classificationSelect')
	citySelect.value = await globalVue.getSelect('citySelect')
	citySelect.value = citySelect.value.map(i => {
		i['label'] = i.selectName;
		return i
	})

	// 地图监听事件  统一调用
	nextTick( () => {
		if (!totalBox[0]?.type) {
			totalBox.map(i => {
				i['type'] = classificationSelect.value.find(j => j.label == i.label)?.value;
				i['popoverList'] = i['popoverList'].map(j => {
					j['type'] = i['type'];
					j['totalActive'] = i['label'];
					return j
				})
				return i;
			})
		}
		if (!iconPointList[0]?.type) {
			iconPointList.map(i => {
				i['type'] = classificationSelect.value.find(j => j.label == i.label)?.value;
				return i;
			})
		}
		getMapOrganization();
		getMapCar();
		getTreeList();
		addOverlay();
		getTotalData();
		addEvent();
	});
};

// 更新左侧统计数据,刷新告警列表
watch(() => globalVue.alarmNumber, (val) => {
	getTotalData();
	if (tabs_show.value == 'chart') {
		getRigidList();
	} else {
		getTableData();
	}
});
const contentShow = ref(false);
const content_table = ref(null);
watch(contentShow, (val) => {
	if (val) {
		content_table.value.style.bottom = 0;
	} else {
		content_table.value.style.bottom = '-370px';
	};
});

// 地图数据
/**
 * 图标数据
 * @param icon_Alarm 红色图标
 * @param icon_No 蓝色图标
 * @param icon_Off 灰色图标
 * @param icon_Organization 组织图标
 * @param icon_Organization_Example 组织实例图标
 * @param icon_Car_Example 车辆实例图标
 */
var iconPointList = [
	{
		label: 'AMBULANCE', 
		icon_Alarm: require('@/assets/image/index/map_ico_vehicle_alarm.png'), 
		icon_No: require('@/assets/image/index/map_ico_vehicle2.png'), 
		icon_Off: require('@/assets/image/index/map_ico_vehicle.png'), 
		icon_Organization: require('@/assets/image/index/ico_hospital_map.png'), 
		icon_Organization_Example: require('@/assets/image/alarm_vehicle/organ_1.png'), 
		icon_Car_Example: require('@/assets/image/alarm_vehicle/car_1.png'), 
	},{
		label: 'TAXI', 
		icon_Alarm: require('@/assets/image/index/ico_taxi_alarm.png'), 
		icon_No: require('@/assets/image/index/ico_taxi_no.png'), 
		icon_Off: require('@/assets/image/index/ico_taxi_off.png'), 
		icon_Organization: require('@/assets/image/index/ico_taxi_map.png'), 
		icon_Organization_Example: require('@/assets/image/alarm_vehicle/organ_3.png'), 
		icon_Car_Example: require('@/assets/image/alarm_vehicle/car_3.png'), 
	},{
		label: 'POLICE CAR', 
		icon_Alarm: require('@/assets/image/index/ico_police_alarm.png'), 
		icon_No: require('@/assets/image/index/ico_police_no.png'), 
		icon_Off: require('@/assets/image/index/ico_police_off.png'), 
		icon_Organization: require('@/assets/image/index/ico_police_map.png'), 
		icon_Organization_Example: require('@/assets/image/alarm_vehicle/organ_4.png'), 
		icon_Car_Example: require('@/assets/image/alarm_vehicle/car_4.png'), 
	},{
		label: 'BUS', 
		icon_Alarm: require('@/assets/image/index/ico_bus_alarm.png'), 
		icon_No: require('@/assets/image/index/ico_bus_no.png'), 
		icon_Off: require('@/assets/image/index/ico_bus_off.png'), 
		icon_Organization: require('@/assets/image/index/ico_bus_map.png'), 
		icon_Organization_Example: require('@/assets/image/alarm_vehicle/organ_2.png'), 
		icon_Car_Example: require('@/assets/image/alarm_vehicle/car_2.png'), 
	},{
		label: 'TRAIN', 
		icon_Alarm: require('@/assets/image/index/ico_train_alarm.png'), 
		icon_No: require('@/assets/image/index/ico_train_no.png'), 
		icon_Off: require('@/assets/image/index/ico_train_off.png'), 
		icon_Organization: require('@/assets/image/index/ico_train_map.png'), 
		icon_Organization_Example: require('@/assets/image/alarm_vehicle/organ_5.png'), 
		icon_Car_Example: require('@/assets/image/alarm_vehicle/car_5.png'), 
	},
]
const mapComRef = ref(null);
const zoom = ref(15);
const center = reactive({ lat: 31.241148188266905, lng: 29.99872187301016 });
const markersDrop = reactive({});

// 获取地图上所有车辆及医院
let getMapOrganization = () => {
	instance.proxy.$http.get('overview.baseHospital', { params: { page: 1, size: 9999999 } }).then(res => {
		let organizationList = res.data.content.map(i => carPointData(i))
		iconPointList.forEach(i => {
			markersDrop['organization_' + i.label] = {
				title: 'organization_' + i.label,
				icon: i.icon_Organization,
				scale: 0.8,
				markers: organizationList.filter(j => j.position[0] != null && i.type == j.type)
			}
		})
	});
};
function carPointData(i){
	return {
		id: i.id,
		type: i?.type,
		position: [i.lng, i.lat]
	}
}
let getMapCar = () => {
	let paramsDash = {
		startTime: moment().format("YYYY-MM-DD") + ' 00:00:00',
		endTime: moment().format("YYYY-MM-DD") + ' 23:59:59',
	};
	instance.proxy.$http.get('overview.getDashBoardAmbulanceList', { params: paramsDash }).then(res => {
		let alarm_arr = [], on_arr = [], off_arr = [];
		res.data.forEach(i => {
			// haveAlarm 
			if (i.haveAlarm && i.haveAlarm == 1) {
				alarm_arr.push(carPointData(i));
			} else {
				if (i.cameraStatus && (i.cameraStatus.indexOf('1') >= 0)) {
					on_arr.push(carPointData(i));
				} else {
					off_arr.push(carPointData(i));
				};
			};
		});
		
		// alarm_**  红色告警图标   on_**  蓝色运行图标   off_**  灰色未运行图标
		iconPointList.forEach(i => {
			markersDrop['on_' + i.label] = {
				title: 'on_' + i.label,
				icon: i.icon_No,
				scale: 0.8,
				markers: on_arr.filter(j => j.position[0] != null && i.type == j.type)
			}
			markersDrop['off_' + i.label] = {
				title: 'off_' + i.label,
				icon: i.icon_Off,
				scale: 0.8,
				markers: off_arr.filter(j => j.position[0] != null && i.type == j.type)
			}
			markersDrop['alarm_' + i.label] = {
				title: 'alarm_' + i.label,
				icon: i.icon_Alarm,
				scale: 0.8,
				markers: alarm_arr.filter(j => j.position[0] != null && i.type == j.type)
			}
		})
	});
}


const dropAlarmLine = reactive({
	alarmOne: {		// 轮椅
		id: 1,
		title: 'alarmOn_one',
		icon: alarm_1,
		scale: 0.8,
		markers: [],
	},
	alarmTwo: {		// 抽烟
		id: 2,
		title: 'alarmOn_two',
		icon: alarm_2,
		scale: 0.8,
		markers: [],
	},
	alarmThree: {		// 打电话
		id: 3,
		title: 'alarmOn_three',
		icon: alarm_3,
		scale: 0.8,
		markers: [],
	},
	alarmFour: {		// 遮挡
		id: 4,
		title: 'alarmOn_four',
		icon: alarm_4,
		scale: 0.8,
		markers: [],
	}
});
// 医院弹框
const showHospitalPopup = ref(false);
const hospitalPopup = ref(null);
const hospitalPopupRef = ref(null);
const hospitalDetail = ref({});		// 医院详情
// 车辆弹框
const showCarPopup = ref(false);
const CarPopupRef = ref(null);

const showCarHoverPopup = ref(false);
const hoverCarPopup = ref(null);
const hoverCarPopupRef = ref(null);
// const videoRefBefore = ref(null);		// 前摄像头
// const videoRefAfter = ref(null);		// 后摄像头

const videoUrl1 = ref('');
const videoUrl2 = ref('');
const hlsVideoBefore = ref(null);
const hlsVideoAfter = ref(null);
const CarIdPopup = ref(null);		// 救护车id   用户开关流
const CarDetail = ref({});		// 救护车详情

const CarHoverIdPopup = ref(null);		// 救护车id  Hover   用户开关流
const CarHoverDetail = ref({});		// 救护车详情	Hover

let addEvent = () => {
	mapComRef.value.openMap.on('pointermove', e => {
		//鼠标经过箭头变手势，，可以在if的条件中加入指定的图层layerId即可
		let pixel = mapComRef.value.openMap.getEventPixel(e.originalEvent);
		let feature = mapComRef.value.openMap.forEachFeatureAtPixel(pixel, (feature) => {
			return feature;
		});
		let event = mapComRef.value.openMap.getTargetElement();
		if (feature) {
			event.style.cursor = 'pointer';
		} else {
			event.style.cursor = '';
		};
	});
	mouseClick();
};

let addOverlay = () => {
	// 创建Overlay
	hospitalPopup.value = new Overlay({
		element: hospitalPopupRef.value,
		positioning: "bottom-center",
		stopEvent: false,
		offset: [0, -20],
	});
	hoverCarPopup.value = new Overlay({
		element: hoverCarPopupRef.value,
		positioning: "bottom-center",
		stopEvent: false,
		offset: [0, -20],
	});
	mapComRef.value.openMap.addOverlay(hospitalPopup.value);
	nextTick(() => {
		mapComRef.value.openMap.addOverlay(hoverCarPopup.value);
	})
};
let carNum = ref(null);					// 区分不同车辆
let organizationNum = ref(null);					// 区分不同组织
let alarmNum = ref(null);				// 区分不同告警
let hospitalIdMap = ref('');		// hover存储医院id
let hospitalHoverOrClick = ref('');			// 判断打开医院弹框的是hoer还是click
// 判断名称中是否包含 on_  off_  alarm_  的正则  就是判断是否是车辆打点的
function containsKeywords(str) {  
	const pattern = /^(on_|off_|alarm_)/;  
	return pattern.test(str);  
} 
// 判断名称中是否包含 organization_  的正则  就是判断是否是组织打点的
function containsKeyOrganization(str) {  
	const pattern = /^(organization_)/;  
	return pattern.test(str);  
} 
let mouseClick = () => {
	carNum.value = null;
	organizationNum.value = null;
	mapComRef.value.openMap.on("pointermove", (e) => {
		Object.keys(markersDrop).forEach(i => {
			if (containsKeywords(i)) {
				// 这里是所有车辆 hover 事件，可通过 type 来判断不同车辆
				mapComRef.value.markerLayer[i]?.getFeatures(e.pixel).then((clickedFeatures) => {
					carHover(clickedFeatures, i);
				});
			}
			if(containsKeyOrganization(i)){
				// 医院hover
				mapComRef.value.markerLayer[i]?.getFeatures(e.pixel).then((clickedFeatures) => {
					organizationHover(clickedFeatures, i);
				})
			}
		})
	});
	mapComRef.value.openMap.on("singleclick", (e) => {
		Object.keys(markersDrop).forEach(i => {
			if (containsKeywords(i)) {
				// 这里是所有车辆点击事件，可通过 type 来判断不同车辆
				mapComRef.value.markerLayer[i]?.getFeatures(e.pixel).then((clickedFeatures) => {
					carClick(clickedFeatures, i);
				});
			}
			if(containsKeyOrganization(i)){
				// 医院点击
				mapComRef.value.markerLayer[i]?.getFeatures(e.pixel).then((clickedFeatures) => {
					organizationClick(clickedFeatures, i)
				});
			}
			if(/^(alarmOn_)/g.test(i)){
				mapComRef.value.markerLayer[i]?.getFeatures(e.pixel).then((clickedFeatures) => {
					alarmClick(clickedFeatures, dropIndex);
				});
			}
		})
	});
};
function organizationHover(clickedFeatures, num) {
	if (clickedFeatures.length) {
		const features = clickedFeatures[0].get("features");
		if (features.length > 1) {
			// const extent = boundingExtent(
			// 	features.map((r) => r.getGeometry().getCoordinates())
			// );
			// mapComRef.value.mapFit(extent);
		} else {
			if (hospitalHoverOrClick.value != 'click') {
				organizationNum.value = num
				hospitalHoverOrClick.value = 'hover';
				showHospitalPopup.value = true;
				hospitalIdMap.value != features[0].get('id') && getHospitalPopup(features[0].get('id'));
				let coordinates = features[0].getGeometry().getCoordinates();
				hospitalPopup.value.setPosition(coordinates);
			};
		};
	} else {
		if (hospitalHoverOrClick.value == 'hover' && organizationNum.value == num) {
			showHospitalPopup.value = false;
			hospitalIdMap.value = '';
		};
	};
}
function organizationClick(clickedFeatures, num) {
	if (clickedFeatures.length) {
		const features = clickedFeatures[0].get("features");
		if (features.length > 1) {
			const extent = boundingExtent(
				features.map((r) => r.getGeometry().getCoordinates())
			);
			mapComRef.value.mapFit(extent);
		} else {
			organizationNum.value = num
			hospitalHoverOrClick.value = 'click';
			showHospitalPopup.value = true;
			hospitalIdMap.value != features[0].get('id') && getHospitalPopup(features[0].get('id'));
			let coordinates = features[0].getGeometry().getCoordinates();
			hospitalPopup.value.setPosition(coordinates);
		};
	} else {
		if (organizationNum.value == num) {
			hospitalHoverOrClick.value = '';
			showHospitalPopup.value = false;
		}
	};
}
function carHover(clickedFeatures, num) {
	if (clickedFeatures.length) {
		const features = clickedFeatures[0].get("features");
		if (features.length > 1) {
			// const extent = boundingExtent(
			// 	features.map((r) => r.getGeometry().getCoordinates())
			// );
			// mapComRef.value.mapFit(extent);
		} else {
			carNum.value = num
			let coordinates = features[0].getGeometry().getCoordinates();
			hoverCarPopup.value.setPosition(coordinates);
			showCarHoverPopup.value = true;
			carNum.value = num;
			CarHoverIdPopup.value != features[0].get('id') && getCarHoverDetail(features[0].get('id'));
		};
	} else {
		if (carNum.value == num) {
			showCarHoverPopup.value = false;
			CarHoverIdPopup.value = '';
		}else{
		}
	};
}
function carClick(clickedFeatures, num) {
	if (clickedFeatures.length) {
		const features = clickedFeatures[0].get("features");
		if (features.length > 1) {
			let isSame = features.filter(i => i.get('center') == features[0].get('center')).length == features.length;
			if (isSame) {
				removeCarInfo();
				nextTick(() => {
					getCarDetail(features[0].get('id'), features[0].get('type'));
					// showCarPopup.value = true;
					carNum.value = num;
				})
			} else {
				const extent = boundingExtent(
					features.map((r) => r.getGeometry().getCoordinates())
				);
				mapComRef.value.mapFit(extent);
			}
		} else {
			removeCarInfo();
			nextTick(() => {
				getCarDetail(features[0].get('id'), features[0].get('type'));
				// showCarPopup.value = true;
				carNum.value = num;
			})
		};
	} else {
		if (carNum.value == num) {
			// removeCarInfo();
		};
	};
};
function alarmClick(clickedFeatures, num) {
	if (clickedFeatures.length) {
		const features = clickedFeatures[0].get("features");
		if (features.length > 1) {
			const extent = boundingExtent(
				features.map((r) => r.getGeometry().getCoordinates())
			);
			mapComRef.value.mapFit(extent);
		} else {
			// features[0].get('id')
			alarmNum.value = num;
		};
	} else {
		if (alarmNum.value == num) {

		};
	};
};
// 关闭车辆推流视频，清空地图路线
function removeCarInfo() {
	mapComRef.value.removeRoute();	// 清空之前画的路线
	mapComRef.value.openMap.removeLayer(mapComRef.value.markerLayer['alarmOn_one']);		//  删除对应图层的图标
	mapComRef.value.openMap.removeLayer(mapComRef.value.markerLayer['alarmOn_two']);		//  删除对应图层的图标
	mapComRef.value.openMap.removeLayer(mapComRef.value.markerLayer['alarmOn_three']);		//  删除对应图层的图标
	mapComRef.value.openMap.removeLayer(mapComRef.value.markerLayer['alarmOn_four']);		//  删除对应图层的图标
	dropAlarmLine.alarmOne.markers = [];
	dropAlarmLine.alarmTwo.markers = [];
	dropAlarmLine.alarmThree.markers = [];
	dropAlarmLine.alarmFour.markers = [];
	showCarPopup.value = false;
	hlsVideoBefore.value && hlsVideoBefore.value.disposeVideo();
	hlsVideoAfter.value && hlsVideoAfter.value.disposeVideo();
	// 关闭推流  
	let videoFlow = storage.getLocal('videoFlow');
	videoFlow && instance.proxy.$http.post('overview.closeVideoStream', videoFlow).then(res => { });
	storage.removeLocal('videoFlow');
};

function getCarHoverDetail(id) {
	CarHoverIdPopup.value = id;
	instance.proxy.$http.get('archiveData.getAmbulanceDetail', { params: { id, ambulanceId: id } }).then(res => {
		CarHoverDetail.value = res.data;
	});
};
// 地图上点击车辆，获取车辆详情
function getCarDetail(id, type) {
	CarIdPopup.value = id;
	instance.proxy.$http.get('archiveData.getAmbulanceDetail', { params: { id, ambulanceId: id } }).then(res => {
		res.data['icon'] = iconPointList.find(j => j.type == type)?.icon_Organization;
		CarDetail.value = res.data;
	});

	// 打开下面数据
	treeData.treeActiveKey = id;	// tree高亮选中车辆
	contentShow.value = true; 	// 打开
	// totalBoxActive.value = "Alarm";		// 选中告警
	componentActive.value = 1;		// 选中告警
	tabsClick('chart', id);    	// 切换到甘特图,并请求当前车辆数据

	routeDrop(id);
	instance.proxy.$http.get('overview.getVideo', { params: { ambulanceId: id } }).then(res => {
		res.data.map(i => {
			i['lng'] = Number(i['lng']).toFixed(8);
			i['lat'] = Number(i['lat']).toFixed(8);
			return i;
		});
		if (res.data.length == 0) {
			ElMessage({
				type: 'warning',
				message: 'No AIBOX cameras!',
			})
			return;
		}
		let url, url1;
    if (res.data[0]?.rtmpurl.indexOf('rtmp://') > -1) {
      url = _this.$utils.rtmpToHttp(res.data[0]?.rtmpurl, 'm3u8');
    }else{
      url = res.data[0]?.rtmpurl
    }
    if (res.data[1]?.rtmpurl.indexOf('rtmp://') > -1) {
      url1 = _this.$utils.rtmpToHttp(res.data[1]?.rtmpurl, 'm3u8');
    }else{
      url1 = res.data[1]?.rtmpurl
    }
		videoUrl1.value = url;
		videoUrl2.value = url1;
		showCarPopup.value = true;
		nextTick(() => {
			// 开启推流 
			let uuid = _this.$utils.createHash(18);
			let videoFlow = {
				"uuid": uuid,
				"cameraVideoList": res.data
			};
			storage.setLocal('videoFlow', videoFlow);
			url && instance.proxy.$http.post('overview.openVideoStream', videoFlow).then(res => { });
		});
	});
};
// 传参 车辆id  画车辆轨迹，轨迹中告警打点
let routeDrop = (id, notScale = true) => {
	// treeData.treeActiveKey = id;	// tree高亮选中车辆
	let params = {
		ambulanceId: id,
		startTime: moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 00:00:00',
		endTime: moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 23:59:59',
	};
	instance.proxy.$http.get('overview.getAmbulanceTrajectoryList', { params }).then(res => {
		let { ambulanceTrajectoryList, alarmList } = res.data;
		let ambulanceList = ambulanceTrajectoryList.map(x => [x.longitude, x.latitude]);	// 路线数组
		alarmList.forEach(i => {
			let statusObj = stateList.value.find(j => !j.label.indexOf(i.alarmTypeName));
			if (statusObj.alarmId == 1) {
				dropAlarmLine.alarmOne.markers.push({ id: i.id, position: [i.gpsLongitude, i.gpsLatitude] });
			} else if (statusObj.alarmId == 2) {
				dropAlarmLine.alarmTwo.markers.push({ id: i.id, position: [i.gpsLongitude, i.gpsLatitude] });
			} else if (statusObj.alarmId == 3) {
				dropAlarmLine.alarmThree.markers.push({ id: i.id, position: [i.gpsLongitude, i.gpsLatitude] });
			} else if (statusObj.alarmId == 4) {
				dropAlarmLine.alarmFour.markers.push({ id: i.id, position: [i.gpsLongitude, i.gpsLatitude] });
			};
		});
		mapComRef.value.setMarkerObj(dropAlarmLine);
		mapComRef.value.drawRoute(ambulanceList, notScale);
	});
};
function getHospitalPopup(id) {
	hospitalIdMap.value = id;
	instance.proxy.$http.get('overview.getDashboardHospital', { params: { id } }).then(res => {
		res.data['lat'] = (res.data['lat'] + '').substr(0, 8);
		res.data['lng'] = (res.data['lng'] + '').substr(0, 8);
		hospitalDetail.value = res.data;
	});

};
function goHospitalDetail() {
	_this.$router.push({ path: '/hospitalDetail', query: { id: hospitalDetail.value.id, disabled: true } });
};
// ------------------------- 地图数据 ---------------------------------------


// 树状搜索图
const treeRef = ref(null);
const treeSearchStr = ref('');
const treeIdList = ref([]);
const treeData = reactive({
	treeList: [],
	treeActiveKey: '',
});
const defaultProps = {
	children: 'list',
	label: 'name',
};

function getTreeList() {
	let params = {}
	totalActiveType.value && (params['type'] = Number(totalActiveType.value))
	instance.proxy.$http.get('overview.getDashboardOrganizationTree', {params}).then(res => {
		treeData.treeList = formatTree(res.data, 1);
	});
}
function formatTree(_treeData, zoom){
	_treeData.map(i => {
		i.zoom = zoom;
		i.key = zoom + '-' + i.id;
		i.list && (i.list = formatTree(i.list, zoom + 1));
		return i
	})
	return _treeData;
}

watch(treeSearchStr, (val) => {
	treeRef.value.filter(val)
});
let filterNode = (value, data) => {
	if (!value) return true;
	return data.name.includes(value);
};
function nodeClick(node, nodeAttr, TreeNode, event) {
	if (node.zoom == 1) {
		// 组织
		tableTotalData.tableForm = {};
		tableTotalData.tableForm['hospitalId'] = node.id;
		node.lng && node.lat && mapComRef.value.openMap.getView().animate({ // 只设置需要的属性即可
			center: olProj.fromLonLat([node.lng, node.lat]),  // 中心点
			zoom: 16, // 缩放级别
			rotation: undefined, // 缩放完成view视图旋转弧度
			duration: 1000 // 缩放持续时间，默认不需要设置
		});
		// getTableData();
	} else if (node.zoom == 2) {
		// 城市
		tableTotalData.tableForm = {};
		tableTotalData.tableForm['city'] = node.id;
		tableTotalData.tableForm['hospitalId'] = nodeAttr.parent.data.id;
		// getTableData();
	} else if (node.zoom == 3)  {
		// 车辆
		tableTotalData.tableForm = {};
		tableTotalData.tableForm['ambulanceId'] = node.id;
		tableTotalData.tableForm['city'] = nodeAttr.parent.data.id;
		tableTotalData.tableForm['hospitalId'] = nodeAttr.parent.parent.data.id;
		if (node.id != CarIdPopup.value) removeCarInfo();
		
		// 进行地图中心点定位，
		CarIdPopup.value = node.id;
		instance.proxy.$http.get('archiveData.getAmbulanceDetail', { params: { id: node.id, ambulanceId: node.id } }).then(res => {
			// center.lat = res.data.lat;
			// center.lng = res.data.lng;
			mapComRef.value.openMap.getView().animate({ // 只设置需要的属性即可
				center: olProj.fromLonLat([res.data.lng, res.data.lat]),  // 中心点
				zoom: 18, // 缩放级别
				rotation: undefined, // 缩放完成view视图旋转弧度
				duration: 1000 // 缩放持续时间，默认不需要设置
			});
		});
	};
	if (componentActive.value == 1) {
		if (tabs_show.value == 'table') {
			getTableData();
		}else{
			getRigidList();
		}
	}else{
		getTableData();
	}
};
// ------------------------树状搜索图----------------------------------------

// 表格与图表
let tabs_show = ref('table');		// table | chart
let sliderTime = ref(24);		// 1-24

let tableChartTabs = reactive([
	{
		label: 'table',
		activeImage: require("@/assets/image/index/list_btn_table.png"),
		image: require("@/assets/image/index/list_btn_table_active.png")
	}, {
		label: 'chart',
		activeImage: require("@/assets/image/index/list_btn_chart_active.png"),
		image: require("@/assets/image/index/list_btn_chart.png")
	}
]);
let tabsClick = (tabsName, ambulanceId = null) => {
	if(componentActive.value != 1) return;
	if (tabsName == 'chart') {
		getRigidList(ambulanceId);
	} else {
		getTableData();
	};
	tabs_show.value = tabsName;
};
// ----------------------- 表格与图表 -----------------------------------------

// 图表数据
const alarmTime = ref(moment().format("YYYY-MM-DD"));
const tableTotalData = reactive({
	tableData: [],
	tablLoading: false,
	tableForm: {},
	pagination: {
		page: 1,
		size: 10,
		total: 0
	}
});

let alarmTimeChange = (val) => {
	if(componentActive.value != 1) return;
	removeCarInfo();
	nextTick(() => {
		if (tabs_show.value == 'chart') {
			getRigidList();
		} else {
			getTableData();
		}
	})
}

let onDetail = (row) => {
	if (row.ambulanceId != CarIdPopup.value || !dropAlarmLine.alarmOne.markers.length || !dropAlarmLine.alarmTwo.markers.length || !dropAlarmLine.alarmThree.markers.length) {
		removeCarInfo();
		nextTick(() => {
			routeDrop(row.ambulanceId, false);
		});
	};
	mapComRef.value.openMap.getView().animate({ // 只设置需要的属性即可
		center: olProj.fromLonLat([row.gpsLongitude, row.gpsLatitude]),  // 中心点
		zoom: 18, // 缩放级别
		rotation: undefined, // 缩放完成view视图旋转弧度
		duration: 1000 // 缩放持续时间，默认不需要设置
	});
	CarIdPopup.value = row.ambulanceId;
	instance.proxy.$http.get('archiveData.getAlarmDetail', { params: { id: row.id } }).then(res => {
		let statusObj = stateList.value.find(j => !j.label.indexOf(res.data.alarmTypeName));
		let obj = { ...res.data, ...statusObj };
		notifyOpen(obj);
	});
};

let onHandle = (row) => {
	if (row.ambulanceId != CarIdPopup.value || !dropAlarmLine.alarmOne.markers.length || !dropAlarmLine.alarmTwo.markers.length || !dropAlarmLine.alarmThree.markers.length || !dropAlarmLine.alarmFour.markers.length) {
		removeCarInfo();
		nextTick(() => {
			routeDrop(row.ambulanceId, false);
		});
	};
	mapComRef.value.openMap.getView().animate({ // 只设置需要的属性即可
		center: olProj.fromLonLat([row.gpsLongitude, row.gpsLatitude]),  // 中心点
		zoom: 18, // 缩放级别
		rotation: undefined, // 缩放完成view视图旋转弧度
		duration: 1000 // 缩放持续时间，默认不需要设置
	});
	CarIdPopup.value = row.ambulanceId;
	instance.proxy.$http.get('archiveData.getAlarmDetail', { params: { id: row.id } }).then(res => {
		let statusObj = stateList.value.find(j => !j.label.indexOf(res.data.alarmTypeName));
		let obj = { ...res.data, ...statusObj };
		notifyOpen(obj);
	});
};

// 阻止二次触发
let timerTwo = null;
let preventShow = true;
function paginationChange(pagination) {
	if(!preventShow) return;
	preventShow = false;
	timerTwo = setTimeout(() => {
		preventShow = true;
	}, 300);
	getTableData();
};
// --------------------- 图表数据 -------------------------------------------

// 统计数据
let totalActive = ref('Ambulance')
let totalActiveType = ref(null)
let componentActive = ref(0);
let componentTabs = reactive([markRaw(MwTableVehicle), markRaw(MwTableAlarm), markRaw(MwTableHospital)])
// componentType: 0: MwTableVehicle 1：MwTableAlarm 2：MwTableHospital
let totalBox = reactive([
	{
		label: 'AMBULANCE',
		value: 0,
		imgSrc: require("@/assets/image/index/ico_vehicle.png"),
		imgActiveSrc: require("@/assets/image/index/ico_vehicle_active.png"),
		componentType: 0,
		popoverList: [
			{
				label: 'Organization',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_hospital.png"),
				imgActiveSrc: require("@/assets/image/index/ico_hospital_active.png"),
				componentType: 2,
			},
			{
				label: 'Alarm',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_alarm.png"),
				imgActiveSrc: require("@/assets/image/index/ico_alarm_active.png"),
				componentType: 1,
			},
		]
	},{
		label: 'TAXI',
		value: 0,
		imgSrc: require("@/assets/image/index/ico_taxi.png"),
		imgActiveSrc: require("@/assets/image/index/ico_taxi_active.png"),
		componentType: 0,
		popoverList: [
			{
				label: 'Organization',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_hospital.png"),
				imgActiveSrc: require("@/assets/image/index/ico_hospital_active.png"),
				componentType: 2,
			},
			{
				label: 'Alarm',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_alarm.png"),
				imgActiveSrc: require("@/assets/image/index/ico_alarm_active.png"),
				componentType: 1,
			},
		]
	},{
		label: 'POLICE CAR',
		value: 0,
		imgSrc: require("@/assets/image/index/ico_police.png"),
		imgActiveSrc: require("@/assets/image/index/ico_police_active.png"),
		componentType: 0,
		popoverList: [
			{
				label: 'Organization',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_hospital.png"),
				imgActiveSrc: require("@/assets/image/index/ico_hospital_active.png"),
				componentType: 2,
			},
			{
				label: 'Alarm',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_alarm.png"),
				imgActiveSrc: require("@/assets/image/index/ico_alarm_active.png"),
				componentType: 1,
			},
		]
	},{
		label: 'BUS',
		value: 0,
		imgSrc: require("@/assets/image/index/ico_bus.png"),
		imgActiveSrc: require("@/assets/image/index/ico_bus_active.png"),
		componentType: 0,
		popoverList: [
			{
				label: 'Organization',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_hospital.png"),
				imgActiveSrc: require("@/assets/image/index/ico_hospital_active.png"),
				componentType: 2,
			},
			{
				label: 'Alarm',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_alarm.png"),
				imgActiveSrc: require("@/assets/image/index/ico_alarm_active.png"),
				componentType: 1,
			},
		]
	},{
		label: 'TRAIN',
		value: 0,
		imgSrc: require("@/assets/image/index/ico_train.png"),
		imgActiveSrc: require("@/assets/image/index/ico_train_active.png"),
		componentType: 0,
		popoverList: [
			{
				label: 'Organization',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_hospital.png"),
				imgActiveSrc: require("@/assets/image/index/ico_hospital_active.png"),
				componentType: 2,
			},
			{
				label: 'Alarm',
				value: 0,
				imgSrc: require("@/assets/image/index/ico_alarm.png"),
				imgActiveSrc: require("@/assets/image/index/ico_alarm_active.png"),
				componentType: 1,
			},
		]
	},	
]);

// 请求左侧统计数据
let getTotalData = () => {
	let params = {}
	params['startTime'] = moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 00:00:00';
	params['endTime'] = moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 23:59:59';
	instance.proxy.$http.get('overview.getAmbulanceTypeNumList', { params }).then(res => {
		totalBox.map(i => {
			let item = res.data.find(j => j.type == i.type);
			i.value = item?.num || 0;
			i.popoverList.map(x => {
				if (x.componentType == 2) {
					x.value = item?.organizationNum || 0;
				}
				if (x.componentType == 1) {
					x.value = item?.alarmNum || 0;
				}
				return x
			})
			return i
		})
	});
};
function popoverClick(item){
	tabs_show.value = 'table';
	tableTotalData.tableForm = {}
	contentShow.value = true;
	totalActiveType.value = item.type || null;
	totalActive.value = item.totalActive || totalActive.value;
	componentActive.value = item.componentType;
	getTableData();
	getTreeList();
}
// 在已有的图层中 隐藏/显示 名称包含 arr[str] 的图层
function layresHideArr(arr, state = false) {
	for(var i in mapComRef.value.markerLayer) {
		arr.forEach(j => {
			if (i.split('_')[1] == j) {
				// mapComRef.value.openMap.removeLayer(mapComRef.value.markerLayer[i]);		//  删除对应图层的图标
				mapComRef.value.markerLayer[i].setVisible(state);
			}
		})
	}
}
let totalBoxClick = (item, oneGo, removeAlarmTime) => {
	layresHideArr(iconPointList.map( i => i.label), true)
	// label: 'AMBULANCE',
	// label: 'TAXI',
	// label: 'POLICE CAR',
	// label: 'BUS',
	// label: 'TRAIN'
	if (!removeAlarmTime) {
		alarmTime.value = moment().format("YYYY-MM-DD")
	}
	if (!oneGo) {
		contentShow.value = true;
		tableTotalData.tableForm = {};
		treeRef.value.setCurrentKey(null);
		removeCarInfo();
	}
	tabs_show.value = 'table';
	if (totalActive.value == item.label) {
		totalActive.value = ''
		totalActiveType.value = null
		layresHideArr(iconPointList.map( i => i.label), true)
	}else{
		totalActive.value = item.label;
		totalActiveType.value = item.type || null
		let hideCarPointIcon = iconPointList.map( i => i.label).filter(j => j != item.label)
		layresHideArr(hideCarPointIcon, false)
	}
	componentActive.value = item.componentType;
	getTableData();
	getTreeList();
};
function getTableData() {
	tableTotalData.tableData = [];
	tableTotalData.pagination.total = 0;
	let params = {
		...tableTotalData.tableForm,
		page: tableTotalData.pagination.page,
		size: tableTotalData.pagination.size,
	}, url;
	totalActiveType.value && (params['type'] = totalActiveType.value)
	if (componentActive.value == 2) url = 'overview.baseHospital';
	if (componentActive.value == 0) url = 'overview.getAmbulanceList';
	if (componentActive.value == 1) {
		url = 'overview.getAlarmList';
		params['hospitalId'] && (params['hospitalIds'] = params['hospitalId'])
		params['startTime'] = moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 00:00:00';
		params['endTime'] = moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 23:59:59';
	};
	tableTotalData.tablLoading = true;
	instance.proxy.$http.get(url, { params }).then(res => {
		tableTotalData.tablLoading = false;
		let { content, totalElements } = res.data;
		tableTotalData.tableData = content;
		tableTotalData.pagination.total = totalElements;
	}).catch(err => tableTotalData.tablLoading = false);
}
// -------------------------- 统计数据 --------------------------------------

// 刚特图数据
const rigidList = ref([]);
const stateList = ref([]);

let getRigidList = (ambulanceId = null) => {
	let params = {
		startTime: moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 00:00:00',
		endTime: moment(alarmTime.value ? alarmTime.value : undefined).format("YYYY-MM-DD") + ' 23:59:59',
		page: 1,
		size: 10,
		...tableTotalData.tableForm
	};
	totalActiveType.value && (params['type'] = totalActiveType.value)
	ambulanceId && (params['ambulanceId'] = ambulanceId);
	tableTotalData.tableForm['ambulanceId'] && (params['ambulanceId'] = tableTotalData.tableForm['ambulanceId']);
	instance.proxy.$http.get('overview.getAlarmGanttList', { params }).then(res => {
		rigidList.value = res.data.map(i => {
			i['alarmList'] = i['alarmList'].map(j => {
				j['startTime'] = moment(j.time).format('HH:mm');
				j['ambulanceId'] = i.ambulanceId;
				j['state'] = j.status;
				return j;
			});
			i['label'] = i.codenumber || '--';
			return i;
		});;
	});
};
let rigidClick = (alarmItem, aIndex, item) => {
	if (alarmItem.ambulanceId != CarIdPopup.value || !dropAlarmLine.alarmOne.markers.length || !dropAlarmLine.alarmTwo.markers.length || !dropAlarmLine.alarmThree.markers.length) {
		removeCarInfo();
		nextTick(() => {
			routeDrop(alarmItem.ambulanceId, false);
		});
	};
	nextTick(() => {
		CarIdPopup.value = alarmItem.ambulanceId;
		notifyOpen(alarmItem);
		setTimeout(() => {
			mapComRef.value.openMap.getView().animate({ // 只设置需要的属性即可
				center: olProj.fromLonLat([alarmItem.lng, alarmItem.lat]),  // 中心点
				zoom: 18, // 缩放级别
				rotation: undefined, // 缩放完成view视图旋转弧度
				duration: 1000 // 缩放持续时间，默认不需要设置
			});
		}, 0);
	});
};
// ------------------------- 刚特图数据 ---------------------------------------

function indexOfStr(str, checkStr) {
    return str?.indexOf(checkStr) > -1
}
function imgReturn(type, state) {
	let data = iconPointList.find(i => i.type == type);
	if (state == 'car') {
		return data?.icon_Car_Example || ""
	}else{
		return data?.icon_Organization_Example || ""
	}
}
function iconOrganization(type){
	let data = iconPointList.find(i => i.type == type);
	return data?.icon_Organization || ""
}
</script>
<template>
	<div class="index_map">
		<OfflineMap ref="mapComRef" :iconPointList="iconPointList" :center="center" :zoom="zoom" :markers="markersDrop"></OfflineMap>
		<div ref="CarPopupRef" class="car_popup" v-if="showCarPopup">
			<div class="item_box">
				<template v-if="indexOfStr(CarDetail?.status, '1')">
					<div class="camare_box" v-if="videoUrl1">
						<FlvVideo ref="hlsVideoBefore" :src="videoUrl1"></FlvVideo>
					</div>
					<div class="camare_box" v-if="videoUrl2">
						<FlvVideo ref="hlsVideoAfter" :src="videoUrl2"></FlvVideo>
					</div>
				</template>
				<div class="car_title">{{ CarDetail?.codenumber || '--' }}｜{{ CarDetail?.carnumber || '--' }}</div>
				<div class="car_info">
					<img src="@/assets/image/index/ico_yiyuanst.png" alt="">
					<span>：{{ CarDetail?.lng || '--' }}，{{ CarDetail?.lat || '--' }}</span>
				</div>
				<div class="car_info">
					<img :src="iconOrganization(CarDetail.type)" alt="">
					<span>：{{ CarDetail?.hospital || '--' }}</span>
				</div>
				<div class="car_value">Driver：{{ CarDetail?.driver || '--' }}</div>
				<div class="car_value">Speed：{{ indexOfStr(CarDetail?.status, '1') ? CarDetail?.speed || '0' : 0 }} km/h</div>
				<div class="car_value">Vehicle status：{{ indexOfStr(CarDetail?.status, '1') ? CarDetail?.speed ? 'Driving' : 'Stopped' : '--' }}</div>
				<div class="car_value">Camera status：{{ indexOfStr(CarDetail?.status, '1') ? 'Online' : 'Offline' }}</div>
			</div>
		</div>
		<div ref="hospitalPopupRef" class="hospital_popup event_btn" v-show="showHospitalPopup">
			<!-- <img class="hospital_img" src="@/assets/image/alarm_vehicle/organ_4.png" alt=""> -->
			<img class="hospital_img" :src="imgReturn(hospitalDetail.type, 'organ')" alt="">
			<div class="hospital_info hospital_info_title">
				<!-- <img src="@/assets/image/index/ico_yiyuans.png" alt=""> -->
				<img :src="iconOrganization(hospitalDetail.type)" alt="">
				<span class="row_drop">：{{ hospitalDetail.name || '--' }}</span>
			</div>
			<div class="hospital_info">
				<img src="@/assets/image/index/ico_yiyuanst.png" alt="">
				<span class="row_drop">：{{ hospitalDetail.address || '--' }}</span>
			</div>
			<div class="hospital_value">
				<div>Vehicles：{{ hospitalDetail.vehicle || 0 }}</div>
				<div>Cameras：{{ hospitalDetail.camera || 0 }}</div>
			</div>
			<div class="hospital_value">
				<div>Drivers：{{ hospitalDetail.driver || 0 }}</div>
				<div>Alarms：{{ hospitalDetail.alarm || 0 }}</div>
			</div>
			<el-button class="hospital_btn" :icon="MoreFilled" @click="goHospitalDetail" type="primary">Details</el-button>
		</div>
		<div ref="hoverCarPopupRef" class="hospital_popup" v-show="showCarHoverPopup">
			<img class="hospital_img" :src="imgReturn(CarHoverDetail.type, 'car')" alt="">
			<div class="car_title_hover">{{ CarHoverDetail?.codenumber || '--' }} | {{ CarHoverDetail?.carnumber || '--' }}</div>
			<div class="hospital_info">
				<img src="@/assets/image/index/ico_yiyuanst.png" alt="">
				<span class="row_drop">：{{ CarHoverDetail?.lng || '--' }}，{{ CarHoverDetail?.lat || '--' }}</span>
			</div>
			<div class="hospital_value">
				<div class="row_drop" style="width: 100%">City：{{ CarHoverDetail?.city }}</div>
			</div>
			<div class="hospital_value">
				<div class="row_drop">Driver：{{ CarHoverDetail?.driver || '--' }}</div>
				<div>Speed：{{ indexOfStr(CarHoverDetail?.status, '1') ? CarHoverDetail?.speed || '0' : 0 }} km/h</div>
			</div>
			<div class="hospital_value">
				<div style="width: 100%">Vehicle status：{{ indexOfStr(CarHoverDetail?.status, '1') ? CarDetail?.speed ? 'Driving' : 'Stopped' : '--' }}</div>
			</div>
			<div class="hospital_value">
				<div class="row_drop" style="width: 100%">Algorithm：{{ CarHoverDetail?.algorithm }}</div>
			</div>
		</div>
	</div>
	<div class="content" ref="content_table">
		<div class="switch_btn" @click="contentShow = !contentShow">
			<el-icon v-if="contentShow">
				<ArrowDownBold />
			</el-icon>
			<el-icon v-else>
				<ArrowUpBold />
			</el-icon>
		</div>
		<div class="tree_address">
			<div class="search_input">
				<div class="text_Query">Vehicle Query</div>
				<el-input v-model="treeSearchStr" class="input_Query" clearable placeholder="Search for code number/car number" :suffix-icon="Search" />
			</div>
			<div class="search_tree">
				<el-tree ref="treeRef" 
					node-key="key" 
					highlight-current class="filter-tree" 
					:data="treeData.treeList" 
					:expand-on-click-node="false" 
					:auto-expand-parent="false" 
					:default-expanded-keys="treeIdList" 
					:current-node-key="treeData.treeActiveKey" 
					:props="defaultProps" 
					@node-click="nodeClick" 
					:filter-node-method="filterNode">
					<template #default="{ data }">
						<span class="tree_label"><img v-if="data.icon" :src="data.icon" alt=""> {{ data.name }}</span>
					</template>
				</el-tree>
			</div>
		</div>
		<div class="table_chart">
			<div class="tabs_name">
				<div class="information">{{ componentActive == 1 ? 'Alarm' : componentActive == 2 ? 'Organization' : 'Vehicle' }} Management</div>
				<div v-if="componentActive == 1" class="flex-row">
					<div v-for="(tab, index) in tableChartTabs" class="tab_img" :key="index" @click="tabsClick(tab.label)">
						<img :src="tabs_show == 'chart' ? tab.activeImage : tab.image" alt="">
					</div>
					<div class="chart-slider" v-if="tabs_show == 'chart'">
						<div class="slider_img"><img src="~@img/icon/time.png" alt=""></div>
						<el-slider style="margin-right: 15px;width: 120px" size="small" v-model="sliderTime" :min="0" :max="24" />
						<span style="font-size: 12px;">24h</span>
					</div>
				</div>
				<div class="tabs_alarm_time" v-if="componentActive == 1">
					<el-date-picker v-model="alarmTime" type="date" @change="alarmTimeChange" size="small" placeholder="Pick a day" value-format="YYYY-MM-DD" :clearable="false" />
				</div>
			</div>
			<div class="tabs_table" v-if="tabs_show == 'table'">
				<component 
					:key="totalActive" 
					v-loading="tableTotalData.tablLoading" 
					:is="componentTabs[componentActive]" 
					:data="tableTotalData.tableData" 
					:height="238" 
					:pagination="tableTotalData.pagination" 
					@paginationChange="paginationChange"
					@operate1="onDetail" 
					@operate2="onHandle" 
					:showOperate="componentActive == 1"
				></component>
			</div>
			<div class="tabs_chart" v-else>
				<RigidPic :list="rigidList" :stateList="stateList" :sliderTime="sliderTime" @itemClick="rigidClick"></RigidPic>
			</div>
		</div>
	</div>
	<TotalAlarm 
		:active="totalActive"
		:componentActive="componentActive"
		:list="totalBox" 
		@oneClick="totalBoxClick"
		@twoClick="popoverClick" />
</template>
<style scoped lang="less">
.index_map {
	width: 100%;
	height: 100%;
	position: relative;

	.car_popup {
		width: 420px;
		// max-height: 350px;
		padding: 10px;
		// backdrop-filter: blur(5px);
		background-color: #ffffff;
		position: absolute;
		right: 10px;
		border-radius: 8px;
		top: 10px;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		box-shadow: 0px 0 12px 1px rgba(0, 0, 0, 0.16);

		.item_box {
			width: calc(100%);
			font-size: 14px;
			color: var(--mw-font-color-content);

			.car_value {
				margin: 10px 0;
			}

			.car_info {
				display: flex;
				align-items: center;
				margin: 10px 0;

				img {
					width: 22px;
					height: 22px;
				}
			}

			.car_title {
				height: 22px;
				color: var(--mw-font-color-title);
				font-size: 16px;
				margin: 8px 0;
			}

			.camare_box {
				width: 100%;
				height: 225px;
				border-radius: 2px;
				margin-bottom: 15px;
				overflow: hidden;
				background-color: #EDF0F4;
				position: relative;

				img {
					width: 163px;
					height: 146px;
					margin: 23px auto;
					display: block;
				}

				video {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.hospital_popup {
		width: 293px;
		height: 360px;
		padding: 10px;
		// backdrop-filter: blur(5px);
		background-color: #ffffff;
		font-size: 14px;
		border-radius: 8px;
		box-shadow: 0px 0 12px 1px rgba(0, 0, 0, 0.16);
		color: var(--mw-font-color-content);

		.car_title_hover {
			font-size: 18px;
			color: var(--mw-font-color-title);
		}

		.hospital_btn {
			margin: 5px 0;
			position: relative;
		}

		.hospital_btn::before {
			content: " ";
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 9999px;
			border: 1px solid #258cff;
			position: absolute;
			left: 13px;
			top: 6px;
		}

		.hospital_value {
			display: flex;
			align-items: center;
			margin: 5px 0;

			div {
				width: 49%;
			}
		}

		.hospital_info {
			display: flex;
			align-items: center;
			margin: 5px 0;

			img {
				width: 22px;
				height: 22px;
			}
		}

		.hospital_info_title {
			color: var(--mw-font-color-title) !important;
			font-size: 16px !important;
			font-weight: 500;
		}

		.hospital_img {
			width: 100%;
			height: 168px;
			margin-bottom: 10px;
		}
	}

	.alarm_popup {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 6px;
	}

}

.content {
	transition: all 0.5s;
	color: #a9acaf;
	background-color: var(--mw-page-background-bright-color);
	width: 100%;
	height: 370px;
	display: flex;
	position: fixed;
	box-shadow: 0px -6px 12px 1px rgba(58, 140, 252, 0.1);
	left: 0;
	bottom: -370px;
	z-index: 20;

	.switch_btn {
		position: absolute;
		left: 50%;
		top: -22px;
		transform: translateX(-50%);
		width: 70px;
		cursor: pointer;
		box-shadow: 0px -6px 12px 1px rgba(58, 140, 252, 0.1);
		height: 22px;
		text-align: center;
		line-height: 22px;
		border-radius: 6px 6px 0 0;
		background-color: var(--mw-page-background-bright-color);

		.el-icon {
			height: 100%;
		}
	}

	.table_chart {
		width: calc(100% - 450px);
		height: 100%;
		box-sizing: border-box;
		margin: 0 10px;

		.tabs_table {
			width: 100%;
			height: calc(100% - 60px);
			padding: 15px 15px 0;
			overflow: auto;
			background-color: var(--mw-page-table-cell-row-background-color);
			border-radius: 6px;
		}

		.tabs_chart {
			height: calc(100% - 60px);
			padding: 15px;
			overflow: auto;
			background-color: var(--mw-page-table-cell-row-background-color);
		}

		.tabs_name {
			display: flex;
			height: 50px;
			align-items: center;

			.tabs_alarm_time {
				margin-left: 15px;
				// 
			}

			.chart-slider {
				// width: 140px;
				margin-left: 10px;
				display: flex;
				align-items: center;

				.slider_img {
					padding: 4px;
					width: 30px;
					height: 28px;
					margin: 0 5px 0 0;
					box-sizing: border-box;
				}
			}

			.information {
				color: var(--mw-font-color-title);
				margin: 0 15px 0 10px;
				font-size: 16px;
			}

			.tab_img {
				width: 28px;
				height: 28px;
				margin: 0 5px;
				cursor: pointer;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.el-slider {
				--el-slider-main-bg-color: var(--mw-tabs-menu-active-color);
			}
		}
	}

	.tree_address {
		width: 430px;
		padding: 0 0 10px 10px;

		.search_tree {
			padding: 15px;
			background-color: var(--mw-page-table-cell-row-background-color);
			border-radius: 6px;
			height: calc(100% - 50px);
			overflow: auto;

			.tree_label {
				display: flex;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
					margin-right: 6px;
				}
			}

			.el-tree {
				--el-fill-color-blank: var(--mw-page-table-cell-row-background-color);
			}
		}

		.search_input {
			display: flex;
			align-items: center;
			width: 100%;
			height: 50px;

			.el-input {
				--el-input-text-color: var(--mw-font-color-title);
				--el-input-border-color: var(--mw-border-color);
			}

			.text_Query {
				width: fit-content;
				padding: 0 15px 0 10px;
				color: var(--mw-font-color-title);
			}

			.input_Query {
				flex: 1;
				color: var(--mw-font-color-title);
			}
		}
	}
}
</style>
